<template>
  <div class="rank-list">
    <div
      class="rank-card"
      v-for="(card, index) in listData"
      :key="card.user_id + index"
    >
      <div class="rank-card-item">
        <a
          :href="'https://juejin.cn/user/' + card.user_id"
          target="_blank"
          rel="noopener noreferrer"
          class="rank-card-item-avator"
        >
          <div
            class="rank-card-item-level"
            :style="
              card.rank >= 1 && card.rank < 3
                ? {
                    'background-position': '0px 0px',
                    'background-size': '100%',
                    'margin-top': isApp ? '7px' : '11px',
                    'margin-bottom': '0px',
                    height: isApp ? '117px' : '153.5px',
                    'background-image':'url(' + require('../assets/avatar_background_' + card.rank +'.png') +')',
                  }
                : {
                    'background-image':
                      'url(' + require('../assets/avatar_background.png') + ')',
                  }
            "
          >
            <img :src="card.user_info.avatar_large" alt="图片加载中" />
          </div>
        </a>
        <div class="rank-card-item-userinfo">
          <a
            :href="'https://juejin.cn/user/' + card.user_id"
            target="_blank"
            rel="noopener noreferrer"
          >
            <div class="rank-card-item-username">
              <span>{{ card.user_info.user_name }}</span>
              <img
                :src="require('../assets/lv-' + card.user_info.level + '.svg')"
                alt="图片加载中"
                v-if="card.user_info.level > 0 && card.user_info.level <= 7"
              />
            </div>
          </a>
          <div class="card-profile">
            <img
              src=""
              alt="图片加载中"
            />{{ card.user_info.job_title
            }}{{
              card.user_info.company
                ? "&nbsp;@&nbsp;" + card.user_info.company
                : ""
            }}
          </div>
          <div class="card-vote" v-if="!isActivityEnd">
            <img
              src=""
              alt="图片加载中"
            />
            当前票数：{{
              card.vote_cnt > 0 ? card.vote_cnt + "票" : "直播时公布"
            }}
            <span class="card-vote-plus-one"></span>
          </div>
        </div>
        <span class="rank-card-item-index">{{
          card.rank >= 10 ? card.rank : "0" + card.rank
        }}</span>
        <div class="rank-card-item-button-group" v-if="!isActivityEnd">
          <button type="button" @click="onPullTicket">帮Ta拉票</button>
          <button type="button" @click="onSendTicket(card.vote_cnt)">
            给Ta投票
          </button>
        </div>
        <div class="rank-card-item-final-button" v-else :style="{
          'color':card.rank === 1 ? '#fc676a' : card.rank === 2 ? '#f0980e' : card.rank === 3 ? '#1edfd8' : ''
        }">
          最终票数：{{ card.vote_cnt }}
        </div>
      </div>
    </div>
    <LeftWeChat />
    <RightDownLoad />
  </div>
</template>

<script lang="ts">
import LeftWeChat from "./LeftWeChat.vue";
import RightDownLoad from "./RightDownLoad.vue";
import { computed, onMounted, PropType, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import UserInfoType from "../utils/type";
interface ListItem {
  list_type?: number;
  list_user_name?: string;
  rank?: number;
  user_id?: number;
  user_info?: UserInfoType;
  vote_cnt?: number;
}
type listDataType = Array<ListItem>;
interface PropListType {
  listData?: listDataType;
}
export default {
  components: {
    LeftWeChat,
    RightDownLoad,
  },
  props: {
    listData: Array as PropType<listDataType>,
  },
  setup(props: PropListType) {
    const store = useStore();
    const isActivityEnd = computed(() => store.state.isActivityEnd);
    const state = reactive({
      listData: props.listData,
      isApp: false,
    });
    // console.log('列表数据',state.listData);
    const onPullTicket = () => {
      alert("开发中!");
    };
    const onSendTicket = (value: number) => {
      const isLogin = store.state.isLogin;
      if (!isLogin) {
        return (location.href = "https://juejin.cn/login");
      } else {
        alert("开发中...");
      }
    };
    const setIsApp = () => {
      state.isApp = window.innerWidth < 960;
    };
    const resizeHandler = () => {
      setIsApp();
    };
    onMounted(() => {
      setIsApp();
      window.addEventListener("resize", resizeHandler, false);
    });
    return {
      ...toRefs(state),
      onPullTicket,
      onSendTicket,
      isActivityEnd,
    };
  },
};
</script>

<style lang="less">
.rank-list {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-flow: row;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: column;
  position: relative;
  margin-bottom: 25px;
  min-height: 100vh;
  .rank-card {
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 10px;
    background-image: url("../assets/card_background.png");
    .rank-card-item {
      height: 173px;
      display: flex;
      position: relative;
      touch-action: manipulation;
      .rank-card-item-index {
        font-size: 14px;
        color: #fff;
        position: absolute;
        bottom: 43px;
        left: 51px;
      }
      .baseUser {
        color: #fff;
      }
      .rank-card-item-userinfo {
        padding: 24px 20px;
        .baseUser;
        a {
          .baseUser;
        }
        .card-profile,
        .card-vote {
          img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            vertical-align: sub;
          }
        }
        .card-vote {
          .card-vote-plus-one {
            color: #ffd900;
            font-size: 20px;
            font-weight: 800;
          }
        }
        .card-profile {
          width: 180px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .rank-card-item-username {
          margin-bottom: 6px;
          font-weight: 600;
          font-size: 16px;
          cursor: pointer;
          span {
            display: inline-block;
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          img {
            margin-bottom: 4px;
            margin-left: 5px;
          }
        }
      }
      .rank-card-item-final-button {
        position: absolute;
        top: 126px;
        left: 136px;
        color: #fff;
        padding: 5px 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url();
      }
      .rank-card-item-button-group {
        position: absolute;
        top: 116px;
        left: 95px;
        button {
          width: 100px;
          height: 32px;
          border: none;
          color: #fff;
          cursor: pointer;
          background-repeat: no-repeat;
          background-color: transparent;
          background-size: 100% 100%;
          background-image: url();
          & + button {
            color: #000;
            margin-left: 10px;
            background-image: url();
          }
        }
      }
      a {
        background-color: transparent;
        .rank-card-item-level {
          width: 92px;
          height: 92px;
          margin: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-repeat: no-repeat;
          background-size: contain;
          background-image: url("../assets/avatar_background.png");
          img {
            width: 79px;
            height: 79px;
            cursor: pointer;
            border: 1px solid #101b3f;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
@media only screen and (min-width: 960px) {
  .rank-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 960px;
    margin-bottom: 20px;
    .rank-card {
      width: 460px;
      height: 220px;
      margin: 10px;
      .rank-card-item {
        .rank-card-item-button-group {
          top: 158px;
          left: 138px;
          button {
            width: 146px;
            height: 40px;
            font-size: 16px;
            & + button {
              margin-left: 10px;
            }
          }
        }
        .rank-card-item-final-button {
          position: absolute;
          top: 157px;
          left: 173px;
          padding: 10px 40px;
          font-size: 15px;
        }
        .rank-card-item-userinfo {
          font-size: 16px;
          padding: 24px 20px;
          .card-profile,
          .card-vote {
            img {
              width: 21px;
              height: 21px;
              margin-right: 6px;
              vertical-align: sub;
            }
          }
          .card-vote {
            .card-vote-plus-one {
              font-size: 24px;
            }
          }
          .card-profile {
            width: 267px;
            font-size: 16px;
          }
          .rank-card-item-username {
            margin-bottom: 20px;
            font-weight: 600;
            font-size: 21px;
            span {
              max-width: 200px;
            }
            img {
              margin-bottom: 8px;
              margin-left: 5px;
            }
          }
        }
        .rank-card-item-index {
          font-size: 24px;
          bottom: -6px;
          left: 65px;
        }
        a {
          .rank-card-item-level {
            margin: 26px 17px;
            width: 120px;
            height: 120px;
            img {
              width: 104px;
              height: 104px;
            }
          }
        }
      }
    }
  }
}
</style>